// Vue
import Vue from 'vue';
import App from './App';

// 配置
import Setting from './setting';

// 混合
import mixinApp from '@/mixins/app';

// 插件
import plugins from '@/plugins';
import MonthRangeDatePicker from 'iview-datepicker-monthrange';
import Viewer from 'v-viewer'

// store
import { mapGetters, mapState } from 'vuex';
import store from '@/store/index';

// iView 和 iView Pro
import ViewUI from 'view-design';
import iViewPro from '@/libs/iview-pro/iview-pro.min.js';

// 菜单和路由
import router from './router';
import { frameInRoutes } from '@/router/routes';

// 多语言
import i18n from '@/i18n';

// 方法
import { getMenuPath } from '@/libs/system';
import cookie from "@/libs/util.cookies.js"
import * as tool from "@/libs/tool"

Vue.prototype.$bus = new Vue();

// 内置组件
import iLink from '@/components/link';
import iPagebody from '@/components/pageBody';
import darkTable from '@/components/darkTable';
import query from '@/components/query';
import inputTree from '@/components/inputTree';
import treeTwo from '@/components/treeTwo';
import lightModal from '@/components/lightModal';
import filter from "@/filter/filter"

// 视图组件
import echarts from 'echarts'
// 使用样式，修改主题可以在 styles 目录下创建新的主题包并修改 iView 默认的 less 变量
// 参考 https://www.iviewui.com/docs/guide/theme

//滚动条
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

//富文本
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Vue.use(VueQuillEditor);


import './styles/index.less';
import './libs/iview-pro/iview-pro.css';
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import 'viewerjs/dist/viewer.css'
import util from '@/libs/util'
// import Mock from '@/mock'
if (window) window.$t = (key, value) => i18n.t(key, value);

Vue.use(MonthRangeDatePicker);
Vue.prototype.$cookie = cookie
Vue.prototype.$echarts = echarts
Vue.prototype._ = tool
Vue.use(plugins);
Vue.use(ViewUI, {
    i18n: (key, value) => i18n.t(key, value)
});
Vue.use(iViewPro);
Vue.use(Viewer);

Vue.component('i-link', iLink);
Vue.component('i-pageBody', iPagebody);
Vue.component('dark-table', darkTable);
Vue.component('query', query);
Vue.component('inputTree', inputTree);
Vue.component('treeTwo', treeTwo);
Vue.component('lightModal', lightModal);

util.cacheSubUserInfo();

/**权限指令**/
Vue.directive('has', {
    //当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding, vnode) {
        // 获取按钮权限
        let btnPermissions = binding.value
        if (!hasPermission(btnPermissions)) {
            el.parentNode.removeChild(el);
        }

        // 权限检查方法
        function hasPermission(value) {
            let isExist = false;
            let btnPermissions = store.getters["admin/login/permissionList"];
            if (btnPermissions == undefined || btnPermissions == null || btnPermissions.length === 0) {
                return false;
            }
            if (btnPermissions.includes(value)) {
                isExist = true;
            }
            return isExist;
        };
    }
});

Vue.filter('noDataFormat', function (value) {
    let data = value + '';
    if (["null", 'undefined', "", 'NaN'].includes(data)) {
        return ' - '
    } else {
        return value
    }
})

new Vue({
    mixins: [mixinApp],
    router,
    store,
    i18n,
    render: h => h(App),
    created() {
        // 处理路由 得到每一级的路由设置
        this.$store.commit('admin/page/init', frameInRoutes);
        // 加载用户登录的数据
        this.$store.dispatch('admin/account/load');
        // 初始化全屏监听
        this.$store.dispatch('admin/layout/listenFullscreen')
        //初始化orgNoList
        this.$store.dispatch('admin/fourMenu/getOrg')
        //初始化permissionList
        this.$store.dispatch('admin/login/getPermissionList')
        //初始化areaList
        this.$store.dispatch('admin/login/getAreaList')
        //初始化登录人信息
        this.$store.dispatch('admin/login/getUserInfo')
    },
    watch: {
        // 监听路由 控制侧边栏显示 标记当前顶栏菜单（如需要）
        '$route'(to, from) {
            const path = to.path;
            this.$store.commit('admin/menu/setActivePath', path);
            let menuId = this.currentSiderMenuId(this.$route.path);
            if (menuId) {
                let openNames = [];
                getMenuPath(menuId, this.parentList, openNames);
                this.$store.commit('admin/menu/setOpenNames', openNames.reverse());
            }
            this.appRouteChange(to, from);
        }
    },
    computed: {
        ...mapGetters('admin/menu', [
            'currentSiderMenuId'
        ]),
        ...mapState('admin/menu', [
            'parentList'
        ])
    }
}).$mount('#app');
